<!--
 * @Date         : 2023-11-06 21:37:46
 * @LastEditTime : 2023-11-23 20:32:32
 * @description  : searchPage
-->
<template>
  <view class="searchPage">
    <scroll-view class="scrollview" :scroll-y="true" @scroll="onscroll">
      <cl-header
        title="认证"
        :isOccupy="false"
        :scrollTop="scrollTop"
        :transparent="true"
        :isBack="true"
      ></cl-header>
      <u--image
        :showLoading="true"
        src="https://ysgapi.yfzxzjysg.top/bg.png"
        width="100%"
        height="350rpx"
      ></u--image>
      <div class="onlineDetail">
        <div class="main-content">
          <div class="name">
            中华艺术宫小程序是中学学校学生及教师的专属课程服务。请立即认证身份，即可参加本校专属课程。
          </div>
        </div>
      </div>
      <div class="onlineDetail">
        <div class="main-content">
          <div class="row" @click="onClilckSchool">
            <div class="left">
              <u-icon :name="require('@/assets/school.png')" size="32"></u-icon>
            </div>
            <div class="right">
              <u--input
                placeholder="请选择学校"
                border="bottom"
                readonly
                :value="value.name"
                clearable
              ></u--input>
            </div>
          </div>
          <div class="row">
            <div class="left">
              <u-icon name="account-fill" size="28"></u-icon>
            </div>
            <div class="right">
              <u--input
                placeholder="请输入姓名"
                border="bottom"
                v-model="username"
                clearable
              ></u--input>
            </div>
          </div>
          <div class="row">
            <div class="left">
              <u-icon :name="require('@/assets/hao.png')" size="32"></u-icon>
            </div>
            <div class="right">
              <u--input
                placeholder="请输入学号"
                border="bottom"
                v-model="school_no"
                clearable
              ></u--input>
            </div>
          </div>
          <div class="row" @click="pickershow = true">
            <div class="left">
              <u-icon name="tags-fill" color="#2979ff" size="28"></u-icon>
            </div>
            <div class="right">
              <u--input
                placeholder="请选择性别"
                border="bottom"
                readonly
                :value="sex"
                clearable
              ></u--input>
            </div>
          </div>
          <div class="auth-button" @click="onAuth">认证</div>
        </div>
      </div>
    </scroll-view>
    <u-picker
      :show="pickershow"
      :columns="columns"
      @confirm="confirm"
      @close="close"
    ></u-picker>
    <!-- 选择学校 -->
    <u-popup :show="show" mode="center" round="10">
      <view class="school-popup">
        <div class="school-header">
          <u--image
            :src="require('@/assets/login-popup.png')"
            width="601rpx"
            height="215rpx"
          ></u--image>
        </div>
        <scroll-view :scroll-y="true" class="scrollview">
          <view
            class="school-row"
            v-for="item in list"
            :key="item.id"
            @click="onRow(item)"
          >
            <u--image
              :src="require('@/assets/logo.png')"
              width="115rpx"
              height="115rpx"
            ></u--image>
            <view class="name"> {{ item.name }} </view>
            <view class="slice">
              <u--image
                :src="require('@/assets/slice.png')"
                width="29rpx"
                height="29rpx"
                v-if="value.id !== item.id"
              ></u--image>
              <u--image
                v-else
                :src="require('@/assets/slice-a.png')"
                width="29rpx"
                height="29rpx"
              ></u--image>
            </view>
          </view>
        </scroll-view>
        <div class="bottom" @click="onSure">确认选择</div>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { get_course_details } from "@/apis/modules/user";
import hbComment from "@/components/hb-comment_1.2.2/components/hb-comment/hb-comment.vue";
import { authUserInfo, getUserinfo, get_school } from "apis/modules/user";
import { getStorage, removeStorage, setStorage } from "utils/auth";
export default {
  name: "onlineDetail",
  data() {
    return {
      school_no: "",
      sex: "",
      pickershow: false,
      columns: [["男", "女"]],
      username: "",
      value: "",
      show: false,
      commentData: "",
      scrollTop: 0,
      searchValue: "",
      detail: "",
      list: [],
      userInfo: "",
    };
  },
  onLaunch() {},
  onShow() {
    let userInfo = getStorage("userInfo");
    if (userInfo) {
      this.sex = userInfo.sex == 1 ? "男" : "女";
      this.username = userInfo.username;
      this.school_no = userInfo.school_no;
      this.userInfo = userInfo;
    }
    console.log();
  },
  onLoad() {
    this.getSchool();
  },
  methods: {
    onAuth() {
      let { sex, value, username, school_no } = this;
      if (!value) {
        uni.showToast({
          title: "请选择学校",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (!username) {
        uni.showToast({
          title: "请选择输入名字",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (!school_no) {
        uni.showToast({
          title: "请选择输入学号",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (!sex) {
        uni.showToast({
          title: "请选择性别",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      sex = sex == "男" ? 1 : 2;
      let that = this;
      authUserInfo({ username, sex, school_no, school_id: value.id }).then(
        (res) => {
          uni.showToast({
            title: "认证成功",
            duration: 2000,
          });
          removeStorage("userInfo");
          setTimeout(() => {
            getUserinfo().then((info) => {
              setStorage("userInfo", info);
              that.$Router.pushTab({ path: "/pages/home/index" });
            });
          }, 1000);
        }
      );
    },
    confirm(item) {
      console.log(item);
      this.sex = item.value[0];
      this.pickershow = false;
    },
    onRow(item) {
      this.value = item;
    },
    onSure() {
      if (this.value) {
        this.show = false;
      } else {
        uni.showToast({
          title: "请选择学校",
          duration: 2000,
          icon: "none",
        });
      }
    },
    onClilckSchool() {
      this.show = true;
    },
    onPage() {
      this.$Router.push({
        path: "/pagesA/signin/signin?course_id=11",
      });
    },
    onscroll(data) {
      this.scrollTop = data.detail.scrollTop;
    },
    add(data) {
      console.log(data, "add");
    },
    del(data) {
      console.log(data, "del");
    },
    like(data) {
      console.log(data, "like");
    },
    focusOn(data) {
      console.log(data, "focusOn");
    },
    close() {
      this.show = false;
      this.pickershow = false;
    },
    onOpen() {
      this.show = true;
    },
    onWork() {
      this.$Router.push({
        path: "/pages/work/work?course_id=11",
      });
    },
    getSchool() {
      let userInfo = getStorage("userInfo");
      get_school().then((res) => {
        if (userInfo) {
          let value = res.find((item) => userInfo.school_id == item.id) || "";
          this.value = value;
        }
        this.list = res;
      });
    },
    getDourseDetails() {
      let { course_id } = this.$Route.query;
      get_course_details({ course_id }).then((res) => {
        this.detail = res;
        this.$nextTick(() => {
          this.$refs.uReadMore.init();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchPage {
  background: #eeeeee;
  height: 100vh;
  .scrollview {
    height: 100%;
    overflow: hidden;
  }
  .onlineDetail {
    background: #eeeeee;
    padding: 30rpx;
    .main-content {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      .name {
        padding: 40rpx;
        margin-top: 20rpx;
        font-size: 30rpx;
        font-weight: 800;
        color: #333333;
        .name-tag {
          margin-left: 20rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #666666;
        }
      }
      .tag {
        font-size: 18rpx;
        font-weight: bold;
        color: #999999;
        text-align: left;
        margin: 20rpx 0;
        .tag-n {
          padding: 4rpx 20rpx;
          height: 31rpx;
          background: #eeeeee;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          opacity: 1;
        }
        .zcr {
          font-size: 20rpx;
          font-weight: bold;
          color: #999999;
          margin: 20rpx;
        }
        .hz {
          height: 27rpx;
          padding: 4rpx 20rpx;
          background: #ee4d02;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          width: 62rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 27rpx;
        }
      }
      .content {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #666666;
        .desc {
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.77);
          line-height: 50rpx;
        }
      }
      .label {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-top: 40rpx;
      }
      .row {
        margin-top: 20rpx;
        min-height: 88rpx;
        overflow: auto;
      }
      .row-item {
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .entry {
        width: 630rpx;
        height: 98rpx;
        background: #ffffff;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        opacity: 0.98;
        margin: 40rpx auto;
        display: flex;

        .left {
          flex-shrink: 0;
          width: 158rpx;
          height: 98rpx;
          background: #f4986f;
          border-radius: 18rpx 0rpx 0rpx 18rpx;
          opacity: 0.98;
          font-size: 24rpx;
          font-weight: bold;
          color: #ffffff;
          line-height: 98rpx;
          text-align: center;
        }
        .center {
          flex: 1;
          font-size: 18rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.64);
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          box-sizing: border-box;
          padding: 20rpx;
        }
        .right {
          flex-shrink: 0;
          height: 98rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #e04411;
          line-height: 98rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
}
.displayFlex {
  display: flex;
}
.row {
  display: flex;
  align-items: center;
  margin: 100rpx 0;
  .left {
    flex-shrink: 0;
    margin-right: 20rpx;
  }
  .right {
    flex: 1;
  }
}
.entry-popup {
  height: 70vh;
  padding: 60rpx 70rpx;
  .title {
    text-align: center;
    font-size: 36rpx;
    font-weight: 800;
    color: #333333;
  }

  .botton {
    width: 625rpx;
    height: 102rpx;
    background: #e04411;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
    opacity: 1;
    font-size: 32rpx;
    line-height: 102rpx;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
}
.school-popup {
  width: 601rpx;
  height: 913rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .school-header {
    flex-shrink: 0;
  }
  .scrollview {
    width: 100%;
    flex: 1;
    overflow: hidden;
    .school-row {
      display: flex;
      align-items: center;
      padding: 20rpx;
      box-sizing: border-box;
      .name {
        flex: 1;
        margin: 0 20rpx;
        font-size: 28rpx;
        font-weight: 800;
        color: #333333;
      }
      .slice {
        flex-shrink: 0;
        width: 40rpx;
      }
    }
  }
  .bottom {
    width: 504rpx;
    height: 93rpx;
    background: #e04411;
    border-radius: 47rpx;
    font-size: 28rpx;
    font-weight: 800;
    color: #ffffff;
    line-height: 93rpx;
    text-align: center;
    flex-shrink: 0;
    margin: 20rpx 0;
  }
}
.auth-button {
  background: #eb5e15;
  color: #fff;
  margin: 40rpx auto;
  width: 40%;
  height: 80rpx;
  border-radius: 16rpx;
  text-align: center;
  line-height: 80rpx;
}
</style>
